<template>
    <div id="Flow">
        <div class="jx-content">
             <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="Form" class="fl">
                        <el-form-item label="教师信息" >
                             <el-input v-model="Form.info" placeholder="请输入教师信息" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="角色 ：" >
                            <el-select v-model="Form.role" placeholder="请选择角色">
                                <el-option
                                v-for="item in Form.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form> 
                    <button class="button-style"  @click="searchFn">搜 索</button> 
                </div>
                <div class="btn-group fr">
                      <button class="button-style" style="margin-left:10px;" @click="deleteAll" >批量删除</button>
                      <button class="button-style" style="margin-left:10px;" @click="downLoad" >下 载</button>
                 </div>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column  type="selection" width='50'> </el-table-column>
                    <el-table-column prop="name" label="教师名称"></el-table-column>
                    <el-table-column prop="userNumber" label="工号" ></el-table-column>
                    <el-table-column prop="roleName" label="角色"></el-table-column>
                    <el-table-column prop="province" label="省份"> </el-table-column>
                    <el-table-column prop="region" label="登录省份"> </el-table-column>
                    <el-table-column prop="schoolName" label="学校"> </el-table-column>
                    <el-table-column prop="operationCreateTime" label="登陆日期"> </el-table-column>
                    <el-table-column prop="applicant" label="申请人"> </el-table-column>
                    <el-table-column prop="createTime" label="注册日期"> </el-table-column>
                    <el-table-column prop="destroyTime" label="截止日期"> </el-table-column>
                    <el-table-column prop="statusName" label="状态"> </el-table-column>
                    <el-table-column  label="操作">
                         <template slot-scope="scope">
                            <el-button type="text" size="small"  @click="cancel(scope.row.userId)" v-if="scope.row.showAccountCancellation==true">销户</el-button>
                        </template>
                    </el-table-column>
                 </el-table>
            </div>
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount"
             ></el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                Form:{
                    info:'',
                    role:'',
                    options: [
                        {label: '普通教师'},
                        {label: '高校教师'},
                        {label: '销售教师'},
                    ],
                },
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData:[],
                multipleSelection:[],
            }
        },
        created() {
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/tes/operation/page?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&userInfo='+self.Form.info+'&roleName='+self.Form.role).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.content
                        self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.init()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            //下载
            downLoad(){
                 let self = this
                 self.$http.post('/tes/operation/export',{  
                    roleName :self.Form.role,
                    userInfo :self.Form.info
                    },{responseType: 'blob'}) .then((response) => {
                let contentType = response.headers["content-type"]
                if(contentType=='application/json;charset=UTF-8'){
                    self.$message.error(decodeURIComponent(response.headers["code-message"]))
                } else {
                    let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                    let url = window.URL.createObjectURL(blob);
                    let fileName = '账号流水.xls'
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = url;
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                }
            }).catch(err => {
                console.log(err)
            })
                
            },
            //批量删除
            deleteAll(){
               let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/operation/batch-delete',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.init()
						}else{
                            self.init()
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            //注销
            cancel(id){
               let self = this
               self.$confirm('是否确定销户?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.put('/tes/user/'+id+'/status',{
                         status:2
                    }).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '注销成功',
                                type: 'success'
                            })
							self.init()
						}else{
                            self.init()
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            }
        }
    }
</script>
<style scoped>
 .el-form-item>>>.el-input__inner{
     width: 200px;
 }
</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #Flow {
    width: $width;
    margin: 20px auto;
    color: #727272;
      .topcoumt{
       overflow: hidden;
    }
    .btn-box{
        .button-style{
            margin-right: 10px;
        }
    }
}

</style>